@ethlete/core 5.0.0-next.71 → 5.0.0-next.73

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @ethlete/core
 
+## 5.0.0-next.73
+
+### Minor Changes
+
+- The theme generators write a color theme's `type` as `--et-color-theme-type` and a surface's `colorThemeVariants` as `--et-surface-color-theme-variants`, so design frames can resolve semantic colors and surface swaps.
+
+### Patch Changes
+
+- The `color-theme-variants` migration declares `ts-morph`, so `et update` adds it before the codemod runs.
+- `AnimatedLifecycleDirective` no longer throws `Cannot read properties of undefined (reading 'directive')` when a bundle evaluates `AnimatableDirective` first, for example in a lazy chunk that uses `NotificationComponent`.
+- Removes every circular import inside the package, so no module can be read before it has finished loading, and adds a test that fails on a new one.
+- `et migrations` now lists `migrate-create-destroy`, `migrate-color-theme-variants` and `migrate-from-ngrx-toolkit`, all at level `optional`.
+
+## 5.0.0-next.72
+
+### Patch Changes
+
+- Add `resizeHandlesStyles` under `@ethlete/core/design/resize-handles`: the `et-resize-handles` stylesheet for a design drawing.
+
 ## 5.0.0-next.71
 
 ### Patch Changes

package/design/resize-handles.ts

@@ -0,0 +1,4 @@
+import resizeHandles from '../src/lib/resize-handles/resize-handles.component.css?inline';
+
+/** The stylesheet of `ResizeHandlesComponent`, for a design drawing. */
+export const resizeHandlesStyles = resizeHandles;

package/design/theme-css.js

@@ -169,6 +169,8 @@ export const colorThemeCss = (themes, options = {}) => {
         else {
             themeVars.push(`.${runtimePrefix}-color--${name} {`);
         }
+        if (theme.type)
+            themeVars.push(`  --${runtimePrefix}-color-theme-type: ${theme.type};`);
         addThemeColorVariants(themeVars, runtimePrefix, theme);
         themeVars.push('}\n');
     }
@@ -311,6 +313,10 @@ const pushSurfaceVars = (vars, runtimePrefix, theme, indent) => {
     vars.push(`${indent}--${runtimePrefix}-surface-border: ${theme.border};`);
     vars.push(`${indent}--${runtimePrefix}-surface-type: ${theme.type};`);
     vars.push(`${indent}--${runtimePrefix}-surface-elevation: ${theme.elevation};`);
+    const variants = Object.entries(theme.colorThemeVariants ?? {}).filter((entry) => typeof entry[1] === 'string');
+    if (variants.length > 0) {
+        vars.push(`${indent}--${runtimePrefix}-surface-color-theme-variants: ${variants.map(([chosen, variant]) => `${cssThemeName(chosen)} ${cssThemeName(variant)}`).join(', ')};`);
+    }
     if (theme.interactionColor) {
         const { color, onColor, inkColor } = theme.interactionColor;
         pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-interaction`, color, indent);

package/design/theme-css.ts

@@ -8,6 +8,7 @@ export type ThemeCssSurfaceTheme = {
   type: 'light' | 'dark';
   elevation: number;
   isDefault?: boolean;
+  colorThemeVariants?: Partial<Record<string, string>>;
   interactionColor?: {
     color: Required<StateMap<Rgb>>;
     onColor?: StateMap<Rgb>;
@@ -28,6 +29,7 @@ type ThemeCssSwatch = {
 
 export type ThemeCssColorTheme = {
   name: string;
+  type?: 'success' | 'warning' | 'error';
   isDefault?: boolean;
   primary: ThemeCssSwatch;
   secondary?: ThemeCssSwatch;
@@ -252,6 +254,8 @@ export const colorThemeCss = (themes: ThemeCssColorTheme[], options: ThemeCssOpt
       themeVars.push(`.${runtimePrefix}-color--${name} {`);
     }
 
+    if (theme.type) themeVars.push(`  --${runtimePrefix}-color-theme-type: ${theme.type};`);
+
     addThemeColorVariants(themeVars, runtimePrefix, theme);
     themeVars.push('}\n');
   }
@@ -430,6 +434,16 @@ const pushSurfaceVars = (vars: string[], runtimePrefix: string, theme: ThemeCssS
   vars.push(`${indent}--${runtimePrefix}-surface-type: ${theme.type};`);
   vars.push(`${indent}--${runtimePrefix}-surface-elevation: ${theme.elevation};`);
 
+  const variants = Object.entries(theme.colorThemeVariants ?? {}).filter(
+    (entry): entry is [string, string] => typeof entry[1] === 'string',
+  );
+
+  if (variants.length > 0) {
+    vars.push(
+      `${indent}--${runtimePrefix}-surface-color-theme-variants: ${variants.map(([chosen, variant]) => `${cssThemeName(chosen)} ${cssThemeName(variant)}`).join(', ')};`,
+    );
+  }
+
   if (theme.interactionColor) {
     const { color, onColor, inkColor } = theme.interactionColor;